<template>
	<view>
		<view>
			<!-- 任务信息部分 -->
			<view
				v-for="(item, index) in taskInfos"
				:key="index"
				style="margin-bottom: 1px;"
			>
				<CellInput
					v-if="item.prop !== 'repairDesc' && item.prop !== 'cartTypeDesc' && item.prop !== 'weixiuType'"
					v-model="item.value"
					:isReadonly="item.readonly"
					:label="item.label"
					:placeholder="item.placeholder"
					:theme="item.theme"
					:inputBorder="item.isBorder ? item.border : 'none'"
					:labelWidth="item.labelWidth ? item.labelWidth : '90px'"
					:rightIcon="item.isRight ? item.rightIcon : ''"
					:rightIconColor="item.isRight ? item.rightIconColor : ''"
					@handleRightIconClick="handleRightIconClick($event, item)"
				/>
				
				
				
				<RepairDesc
					v-if="item.prop === 'repairDesc' || item.prop === 'cartTypeDesc'"
					:label="item.label"
					:textMsgList="item.textMsgList"
					:pictureList="item.pictureList"
					:voiceList="item.voiceList"
					:videoList="item.videoList"
					@handleClick="handleRepairDesc($event, item)"
				/>
			</view>
			
			<view class="flex flex-wrap align-center bg-dbdcf8 mar-y-10 pad-x-15">
				<CustomRadio
					class="mar-y-5 mar-r-10"
					v-for="(item, index) in managerList"
					:groudId="1"
					:key="index"
					:iconType="'radio'"
					:label="item.RealName"
					:name="item.UserName"
					:value="item.Checked"
					:in-active-value="1"
					:active-value="0"
					@handleRadioClick="handleRadioClick"
				/>
			</view>
		</view>
		
		<view
			class="pos-f bg-white flex align-center pad-x-10 shadow-type-7"
			style="left: 0; bottom: 0; right: 0; height: 60px;"
		>
			<u-button type="info" class="mar-r-10" @click="handleCancel()">取消</u-button>
			<u-button type="primary" @click="handleSubmit()">提交</u-button>
		</view>
	</view>
</template>

<script>
	import CellInput from '@/components/CellInput/index'
	import RepairDesc from '@/components/RepairDesc/index'
	import CustomRadio from '@/components/CustomRadio/index'
	import Utils from '@/utils/utils'
	
	import { mapState } from 'vuex'
	import { getRepairManagers } from '@/apis/applyTask'
	
	export default {
		components: {
			CellInput,
			RepairDesc,
			CustomRadio
		},
		
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				textMsgList: state => state.repair.textMsgList,
				pictureList: state => state.repair.pictureList,
				voiceList: state => state.repair.voiceList,
				videoList: state => state.repair.videoList,
				repairList: state => state.repair.repairList
			}),
		},
		
		watch: {
			// 监听故障件列表变化
			repairList(newVal, oldVal) {
				this.isOperate = true
			}
		},
		
		data() {
			return {
				taskInfos: [], // 任务信息
				managerName: '', // 维修经理
				managerList: [], // 维修经理列表
			}
		},
		
		onLoad() {
			// 查询维修经理列表
			this.findRepairManagers()
		},
		
		mounted() {
			this.initComponent() // 初始化组件
			this.findOrderDetails() // 查询订单详情
		},
		
		onUnload() {
			// 页面卸载后，重置一些状态管理中的数据
			this.$store.commit('repair/setDescInfo', { type: 1, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 2, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 3, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 4, data: [] })
			this.$store.commit('repair/resetRepairComponent', [])
		},
		
		methods: {
			// 查询维修经理列表
			findRepairManagers() {
				let params = {
					location: this.longitude + ',' + this.latitude,
					token: this.token
				}
				
				getRepairManagers(params).then(res => {
					this.managerList = res.Result
					
					if (this.managerList.length > 0) {
						let arr = this.managerList.filter(item => item.Checked === 1)
						
						// 如果存在默认维修经理，那么设置默认
						if (arr.length > 0) {
							this.managerName = arr[0].UserName
						}
					}
				})
			},
			
			// 初始化组件
			initComponent() {
				// 任务信息
				this.taskInfos = [
					{
						prop: 'customerName', // 字段
						label: '客户名称', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: true, // 是否显示边框
						border: 'surround', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'contacts', // 字段
						label: '联系人', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: true, // 是否显示边框
						border: 'surround', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'address', // 字段
						label: '维修地址', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: true, // 是否显示边框
						border: 'surround', // 只有 isBorder 为 true 才生效
						isRight: true, // 如果存在右侧图标，为 true ，反之 false
						rightIcon: 'icon-dizhi', // 右侧图标
						rightIconColor: '#3c9cff', // 右侧图标颜色
					}, {
						prop: 'mobile', // 字段
						label: '联系电话', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: true, // 是否显示边框
						border: 'surround', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'repairDesc', // 字段
						label: '故障描述', // 字段名称
						pageTitle: '故障描述',
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}
				]
			},
			
			// 查询订单详情数据，并回显
			findOrderDetails() {
				let data = {
					customerName: '张三',
					contacts: '李四',
					address: '安徽合肥',
					mobile: '18254857568',
					repairDesc: {
						title: '故障描述',
						textMsgList: [],
						pictureList: [],
						voiceList: [],
						videoList: []
					},
				}
				
				this.showData(data) // 回显数据
			},
			
			// 回显数据，data：需要回显的数据集合
			showData(data) {
				// 设置任务信息
				this.taskInfos.forEach(item => {
					for (let i in data) {
						if (
							item.prop === i &&
							item.prop !== 'repairDesc'
						) {
							item.value = data[i]
						}
						
						// 故障描述
						if (item.prop === 'repairDesc') {
							item.label = data.repairDesc.title
							item.textMsgList = data.repairDesc.textMsgList
							item.pictureList = data.repairDesc.pictureList
							item.voiceList = data.repairDesc.voiceList
							item.videoList = data.repairDesc.videoList
						}
					}
				})
			},
			
			// 修改详情中某个字段下的属性值
			// type：1 车辆信息
			// field：要修改哪个字段中的数据
			// attr：要修改哪个字段下的哪个属性值集合（因为可能是多个属性同时修改）
			// data：修改后的值
			updateData({ type, field, attrs, data}) {
				if (type === 1) {
					// 修改车辆信息中数据
					this.cartInfos.forEach(item => {
						if (item.prop === field) {
							let arr = attrs.split(',')
							
							arr.forEach(j => {
								item[j] = data[j]
							})
						}
					})
				}
			},
			

			
			// 提交
			handleSubmit() {
				
			},
			
			// 取消
			handleCancel() {
				
			},
		}
	}
</script>

<style>

</style>
